<template>
  <div class="ffom">
    <div class="left">
      <p class="title"><i class="el-icon-s-fold"></i>表单元素</p>
      <p class="text">将表单元素拖拽到构建面板中即可生成表单块</p>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="输入框">
          <el-input v-model="form.shuru"></el-input>
        </el-form-item>
        <el-form-item label="密码框">
          <el-input v-model="form.pw"></el-input>
        </el-form-item>
        <el-form-item label="选择框">
          <el-select v-model="form.region" placeholder="请选择">
            <el-option label="写作" value="shanghai"></el-option>
            <el-option label="阅读" value="beijing"></el-option>
            <el-option label="游戏" value="lan"></el-option>
            <el-option label="音乐" value="heih"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间选择">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="yyyy-MM-dd"
              v-model="form.date1"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="活动性质">
          <el-checkbox-group v-model="form.type">
            <el-checkbox label="写作" name="type"></el-checkbox>
            <el-checkbox label="阅读" name="type"></el-checkbox>
            <el-checkbox label="音乐" name="type"></el-checkbox>
            <el-checkbox label="游戏" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="开关">
          <el-switch v-model="form.delivery"></el-switch>
        </el-form-item>

        <el-form-item label="单选框">
          <el-radio-group v-model="form.resource">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="文本域">
          <el-input
            type="textarea"
            v-model="form.desc"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
        <el-form-item class="btn">
          <el-button type="primary" @click="onSubmit" class="but1">
            保存</el-button
          >
          <el-button class="but2">关闭</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="right">
      <div class="top">
        <p class="title"><i class="el-icon-s-fold"></i>构建面板</p>
          <el-button class="button" type="text" @click="open">生成HTML</el-button>
      </div>
      
    </div>
  </div>
</template>

<script>
export default {
  name: "form",
  data() {
    return {
      form: {
        shuru: "",
        pw: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    open() {
        this.$prompt('复制HTML代码', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        })
      }
  },
};
</script>

<style scoped>
.btn {
  padding-top: 15px;
  border-top: 1px solid #e2e2e2;
}
.but1 {
  background: #009688;
  border: 0;
  border-radius: 0;
}
.but2 {
  background: #737c85;
  color: #fff;
  border: 0;
  border-radius: 0;
}
.left .title i,
.right .title i {
  margin-right: 10px;
}
.left .title{
  width: 92%;
  height: 40px;
  line-height: 40px;
  font-size: 15px;
  border-top: 4px solid #d2d2d2;
  border-bottom: 1px solid #e2e2e2;
  padding: 0 20px;
}
.right .top{
 display: flex;
 justify-content: space-between;
 width: 94%;
  height: 40px;
  line-height: 40px;
  font-size: 15px;
  border-top: 4px solid #d2d2d2;
  border-bottom: 1px solid #e2e2e2;
  padding: 0 20px;

}
.right .top .button{
  width: 78px;
  height: 30px;
  border: 1px solid #009688;
  color: #009688;
  margin-top: 5px;
  background: #fff;
}
.right .top .button:hover{
  background: #009688;
  color: #fff;
}
.left .text {
  border: 1px solid #e2e2e2;
  margin: 10px 0 20px 20px;
  padding: 7px 16px;
  height: 40px;
  line-height: 40px;
  border-left: 5px solid #e2e2e2;
}
.ffom {
  display: flex;
}
.ffom .left {
  background: #fff;
  width: 530px;
}
.ffom .right {
  background: #fff;
  width: 700px;
  margin-left: 20px;
}
.el-input {
  width: 220px;
}
.el-form {
  padding: 0 30px;
}
</style>